<template>
    <el-form-item :label="item.label" :labelWidth="item.labelWidth || labelWidth">
        <el-col :span="11">
            <el-form-item :prop="item.key[0]">
                <el-date-picker class="w form-picker"
                                v-model="formData[item.key[0]]"
                                :type="item.data.type || 'date'"
                                :value-format="item.data.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
                                :disabled="item.disabled"
                                :placeholder="item.placeholder || '开始时间'"
                                :clearable="item.clearable !== false"
                                :disabled-date="item.disabledDate"
                                @change="dateChange"
                />
            </el-form-item>
        </el-col>
        <el-col :span="2" class="tw_c">-</el-col>
        <el-col :span="11">
            <el-form-item :prop="item.key[1]">
                <el-date-picker class="w form-picker"
                                v-model="formData[item.key[1]]"
                                :type="item.data.type || 'date'"
                                :value-format="item.data.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
                                :disabled="item.disabled"
                                :placeholder="item.endPlaceholder || '结束时间'"
                                :clearable="item.clearable !== false"
                                :disabled-date="item.endDisabledDate"
                                @change="endDateChange"
                />
            </el-form-item>
        </el-col>
    </el-form-item>
</template>

<script setup lang="ts">

// @ts-ignore
const {formData, item} = defineProps({
    formData: Object,
    item: Object
})
item.data = item.data || {}
if(!item.disabledDate && !item.endDisabledDate && !item.disabledWatch){
    watch(()=>formData[item.key[0]],(val)=> {
        if(val && formData[item.key[1]] && new Date(formData[item.key[1]]).getTime() < new Date(val).getTime()) {
            ElMessage.warning('开始时间不能大于结束时间!')
            formData[item.key[0]] = null
        }
    })
    watch(()=>formData[item.key[1]],(val)=> {
        if(val && new Date(formData[item.key[0]]).getTime() > new Date(val).getTime()) {
            ElMessage.warning('开始时间不能大于结束时间!')
            formData[item.key[1]] = null
        }
    })
}

const dateChange = ()=>{
    if(item.change){
        item.change(formData[item.key[0]],[formData[item.key[0]], formData[item.key[1]]])
    }
}

const endDateChange = (e,val,data)=>{
    if(item.endChange){
        item.endChange(formData[item.key[1]],[formData[item.key[0]], formData[item.key[1]]])
    }
}
</script>

<style scoped lang="scss">

</style>
